<template>
	<view class="page-design-edit" :class="{ 'min-page': isMinPage }" :style="{ height: pageHeight + 'px' }">
		<view class="left-warp">
			<view class="btn-back uni-icons-back" @click="doBack"></view>
			<view class="comp" :class="{ active: comp.type == designType.img }" @click="addComp(designType.img)">图片</view>
			<view class="comp" :class="{ active: comp.type == designType.swiper }" @click="addComp(designType.swiper)">轮播</view>
			<view class="comp" :class="{ active: comp.type == designType.line }" @click="addComp(designType.line)">间隔</view>
			<view class="comp" :class="{ active: comp.type == designType.video }" @click="addComp(designType.video)">视频</view>
			<view class="comp" :class="{ active: comp.type == designType.layer }" @click="addComp(designType.layer)">浮层</view>
			<view class="comp-layers">
				<view class="comp-layer" v-for="layer in layerComps" :key="layer._id" :class="{ active: layer._id == comp._id }" @click="changeComp(layer)">
					浮层{{ (layer._id + '').substr(8) }}
				</view>
			</view>
		</view>
		<view class="center-warp">
			<view class="phone">
				<view class="phone-top"></view>
				<view class="phone-content" :style="{ width: res.base_width + 'px', height: phoneHeight + 'px' }">
					<image class="phone-status" src="https://www.mescroll.com/img/phone-status.png" mode="widthFix"></image>
					<!-- 装修效果预览 -->
					<me-design v-model="comp" :res="res" @edit="editComp" @change="tabIndex = 1"></me-design>
				</view>
				<view class="phone-bottom"></view>
			</view>
		</view>
		<view class="right-warp">
			<view class="tabs-warp"><me-tabs v-model="tabIndex" :tabs="tabs"></me-tabs></view>
			<view class="set-warp">
				<!-- 页面设置 -->
				<view v-if="tabIndex == 0" class="set-page">
					<view class="item-warp">
						<view class="label">页面的标题:</view>
						<input v-model.trim="res.title" class="input item-flex" placeholder="请输入页面标题说明" />
					</view>
					<view class="item-warp">
						<view class="label">页面的别名:</view>
						<input v-model.trim="res.name" class="input item-flex" placeholder="别名 (APP可根据别名查询详情,可选)" />
					</view>
					<view class="item-warp">
						<view class="label">适应状态栏:</view>
						<me-radio v-model="res.bar_auto" :list="singleRadio"></me-radio>
					</view>
					<view class="item-warp" v-if="res.bar_auto">
						<view class="label">状态栏背景:</view>
						<input v-model.trim="res.bar_bg" class="input item-flex" placeholder="请输入色值 (可选,默认透明)" />
					</view>
					<view class="item-warp">
						<view class="label">显示返回键:</view>
						<me-radio v-model="res.show_back" :list="singleRadio" @change="showBack"></me-radio>
					</view>
					<view class="item-warp">
						<view class="label">返回键图标:</view>
						<input v-model.trim="res.btn_back" class="input item-flex" placeholder="页面的返回键" />
						<me-upload v-model="res.btn_back" :preview="false"></me-upload>
					</view>
				</view>

				<!-- 组件设置 -->
				<view v-if="tabIndex == 1" class="set-comp">
					<view class="comp-empty" v-if="!comp.type">请在左侧选择或添加要编辑的组件</view>

					<!-- 图片 -->
					<view class="comp-img" v-if="comp.type == designType.img">
						<view class="item-warp">
							<view class="label">图片地址:</view>
							<input v-model.trim="comp.src" class="input item-flex" placeholder="请输入或上传图片地址" />
							<me-upload v-model="comp.src"></me-upload>
						</view>
						<me-input-url v-model="comp.url" :switch-tab.sync="comp.switchTab"></me-input-url>
						<view class="add-area" v-if="comp.src" @click="addArea(comp)">
							<text class="uni-icons-plusempty"></text>
							<text>添加热区</text>
						</view>
						<template v-if="comp.areas">
							<me-input-url
								v-for="(area, a) in comp.areas"
								:key="area._id"
								v-model="area.url"
								:label="getInputUrlLabel(a)"
								:switch-tab.sync="area.switchTab"
							></me-input-url>
						</template>
					</view>

					<!-- 轮播 -->
					<view class="comp-swiper" v-if="comp.type == designType.swiper">
						<view class="sw-item" v-for="(val, s) in comp.list" :key="val._id">
							<view class="item-warp">
								<view class="label">图片地址:</view>
								<input v-model.trim="val.src" class="input item-flex" placeholder="请输入或上传图片地址" />
								<me-upload v-model="val.src"></me-upload>
							</view>
							<me-input-url v-model="val.url" :switch-tab.sync="val.switchTab"></me-input-url>
							<view class="eidt-swiper">
								<view class="btn-icon uni-icons-plusempty" @click="editSwiper('add', val, comp.list)"></view>
								<template v-if="s > 0">
									<view class="btn-icon uni-icons-closeempty" @click="editSwiper('del', val, comp.list)"></view>
									<view class="btn-icon uni-icons-arrowthinup" @click="editSwiper('up', val, comp.list)"></view>
									<view class="btn-icon uni-icons-arrowthindown" @click="editSwiper('down', val, comp.list)"></view>
								</template>
							</view>
						</view>
						<view class="item-warp">
							<view class="label">是否自动轮播:</view>
							<me-radio v-model="comp.autoplay" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">是否衔接滑动:</view>
							<me-radio v-model="comp.circular" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">是否有小圆点:</view>
							<me-radio v-model="comp.dot_show" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">小圆点选中时的色值:</view>
							<input v-model.trim="comp.dot_color_act" class="input item-flex" placeholder="请输入色值" />
						</view>
						<view class="item-warp">
							<view class="label">小圆点未选中的色值:</view>
							<input v-model.trim="comp.dot_color" class="input item-flex" placeholder="请输入色值" />
						</view>
						<view class="item-warp">
							<view class="label">轮播图边距:</view>
							<input v-model.number="comp.margin" class="input item-flex" placeholder="请输入数值,单位默认rpx" />
						</view>
						<view class="item-warp">
							<view class="label">轮播图间隔:</view>
							<input v-model.number="comp.space" class="input item-flex" placeholder="请输入数值,单位默认rpx" />
						</view>
						<view class="item-warp">
							<view class="label">轮播图圆角:</view>
							<input v-model.number="comp.radius" class="input item-flex" placeholder="请输入数值,单位默认rpx" />
						</view>
						<view class="item-warp">
							<view class="label">轮播背景图:</view>
							<input v-model.trim="comp.bg" class="input item-flex" placeholder="请输入或上传图片地址" />
							<me-upload v-model="comp.bg"></me-upload>
						</view>
					</view>

					<!-- 间隔 -->
					<view v-if="comp.type == designType.line">
						<view class="item-warp">
							<view class="label">间隔高度:</view>
							<input v-model.number="comp.height" class="input item-flex" placeholder="请输入数字, 单位默认rpx" />
						</view>
						<view class="item-warp">
							<view class="label">间隔背景:</view>
							<input v-model.trim="comp.bg" class="input item-flex" placeholder="请输入色值" />
						</view>
					</view>

					<!-- 视频 -->
					<view v-if="comp.type == designType.video">
						<view class="item-warp">
							<view class="label">视频地址:</view>
							<input v-model.trim="comp.src" class="input item-flex" placeholder="请输入或上传视频地址" />
							<me-upload v-model="comp.src"></me-upload>
						</view>
						<view class="item-warp">
							<view class="label">视频封面:</view>
							<input v-model.trim="comp.poster" class="input item-flex" placeholder="请输入或上传视频封面" />
							<me-upload v-model="comp.poster"></me-upload>
						</view>
						<view class="item-warp">
							<view class="label">视频高度:</view>
							<input v-model.number="comp.height" class="input item-flex" placeholder="请输入数值,单位默认rpx" />
						</view>
					</view>

					<!-- 浮层 -->
					<view v-if="comp.type == designType.layer">
						<view class="item-warp">
							<view class="label">浮层图片:</view>
							<input v-model.trim="comp.src" class="input item-flex" placeholder="请输入或上传图片地址" />
							<me-upload v-model="comp.src"></me-upload>
						</view>
						<me-input-url v-model="comp.url" :switch-tab.sync="comp.switchTab"></me-input-url>
						<view class="item-warp" v-if="comp.src">
							<view class="add-area" @click="addArea(comp)">
								<text class="uni-icons-plusempty"></text>
								<text>添加热区</text>
							</view>
							<view class="add-area" @click="addArea(comp, true)">
								<text class="uni-icons-plusempty"></text>
								<text>关闭按钮</text>
							</view>
						</view>
						<template v-if="comp.areas">
							<view v-for="(area, a) in comp.areas" :key="area._id">
								<template v-if="area.close">
									<view class="item-warp">
										<view class="label color-primary">热区{{ a + 1 }}为关闭按钮</view>
									</view>
								</template>
								<template v-else>
									<me-input-url v-model="area.url" :label="getInputUrlLabel(a)" :switch-tab.sync="area.switchTab"></me-input-url>
								</template>
							</view>
						</template>
						<view class="item-warp">
							<view class="label">浮层宽度:</view>
							<input v-model.trim="comp.width" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx" />
						</view>
						<view class="item-warp">
							<view class="label">是否居中:</view>
							<me-radio v-model="comp.center" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">距离顶部:</view>
							<input v-model.trim="comp.top" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx" />
						</view>
						<view class="item-warp">
							<view class="label">距离左边:</view>
							<input v-model.trim="comp.left" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx" />
						</view>
						<view class="item-warp">
							<view class="label">距离右边:</view>
							<input v-model.trim="comp.right" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx" />
						</view>
						<view class="item-warp">
							<view class="label">距离下边:</view>
							<input v-model.trim="comp.bottom" class="input item-flex" placeholder="支持百分比和数字, 数字默认单位rpx" />
						</view>
						<view class="item-warp">
							<view class="label">层级关系:</view>
							<input v-model.trim="comp.zIndex" class="input item-flex" placeholder="请输入数值,层级越高越在上面" />
						</view>
						<view class="item-warp">
							<view class="label">显示遮罩:</view>
							<me-radio v-model="comp.shadow" :list="singleRadio"></me-radio>
						</view>
						<view class="item-warp">
							<view class="label">显示一次:</view>
							<me-radio v-model="comp.show_once" :list="singleRadio"></me-radio>
						</view>
					</view>
				</view>
			</view>
			<view class="submit-warp">
				<button class="btn" @click="submit" type="primary">保存</button>
				<button class="btn" @click="del" type="warn">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
import {apiDesignAdd, apiDesignEdit, apiDesignDetail, apiDesignDel} from '../../api/design.js';
import designType from '../../common/design-type.js';
import {showToast} from '../../common/util.js';
import meDesign from '../../components/me-design/me-design';
import meTabs from '../../components/me-tabs/me-tabs';
import meRadio from '../../components/me-radio/me-radio';
import meUpload from '../../components/me-upload/me-upload';
export default {
	components:{
		meDesign,
		meTabs,
		meRadio,
		meUpload
	},
	data() {
		return {
			pageHeight: 800,
			tabs: ['页面设置', '组件设置'],
			tabIndex: 0,
			designType, // 组件类型
			res: { // 组件数据
				title: "",
				bar_auto: false,
				bar_bg: "",
				show_back: true,
				btn_back: "https://www.mescroll.com/img/btn-back.png",
				comps:[],
				base_width: 375 // 预览屏幕宽度
			},
			comp: {}, // 当前装修的组件
			singleRadio:[
				{value: "是", label: true},
				{value: "否", label: false}
			]
		}
	},
	computed: {
		isMinPage(){
			return this.pageHeight < 800
		},
		phoneHeight(){
			return this.isMinPage ? this.pageHeight - 60 : this.pageHeight - 200
		},
		isEdit() {
			return this.res._id // 是否编辑模式
		},
		pageTitle(){ // 标题
			return this.isEdit ? "装修页详情" : "添加装修页"
		},
		compIndex(){ // 当前操作的组件下标
			return this.res.comps.findIndex(val => val._id == this.comp._id)
		},
		layerComps(){
			return this.res.comps.filter(val => val.type == this.designType.layer)
		}
	},
	onLoad(option) {
		let sys = uni.getSystemInfoSync()
		this.pageHeight = sys.windowHeight - 30
		let _id = option._id
		if(_id){
			// 传入id,则显示详情,可编辑和删除
			this.$set(this.res, "_id", _id)
			// 查询详情
			apiDesignDetail({_id}).then(res=>{
				if(!res.base_width) res.base_width = this.res.base_width
				this.res = res
			})
		}
	},
	methods: {
		// 是否显示返回键
		showBack(){
			if(this.res.show_back && !this.res.btn_back) this.res.btn_back = DESIGN_PAGE_CLOSE
		},
		// 添加组件
		addComp(type){
			let comp = {_id:Date.now(), type}
			if(type == this.designType.swiper){
				comp.autoplay = true
				comp.circular = false
				comp.dot_show = true
				comp.dot_color = "rgba(0, 0, 0, .3)"
				comp.dot_color_act = "#000000"
				comp.margin = 0
				comp.space = 0
				comp.radius = 0
				comp.bg = ""
				comp.list = [{_id: Date.now()}]
			}else if(type == this.designType.line){
				comp.height = 40
				comp.bg = "#eee"
			}else if(type == this.designType.video){
				comp.height = 400
			}else if(type == this.designType.layer){
				comp.zIndex = 600
				comp.center = true
				comp.width = "70%"
				comp.top = "50%"
				comp.left = "50%"
				comp.right = ""
				comp.bottom = ""
				comp.shadow = false
				comp.show_once = true
				comp.show_layer_admin = true // 临时字段,控制显示隐藏,保存时需删除
			}
			this.res.comps.push(comp)
			this.comp = comp
			this.tabIndex = 1
		},
		// 切换当前组件
		changeComp(layer){
			layer.show_layer_admin = true
			this.comp = layer
			this.tabIndex = 1
		},
		// 组件的编辑
		editComp(arg){
			switch (arg.type){
				case 'del':
					this.res.comps.splice(this.compIndex, 1)
					setTimeout(()=>{
						this.comp = {}
					},300)
					break;
				case 'up':
					this.swapItems(this.res.comps, this.compIndex, this.compIndex-1)
					break;
				case 'down':
					this.swapItems(this.res.comps, this.compIndex, this.compIndex+1)
					break;
			}
		},
		// 轮播图的编辑
		editSwiper(type, val, list){
			let index = list.findIndex(v => v._id == val._id)
			switch (type){
				case 'add':
					list.push({_id: Date.now(), src:"", url:""})
					break;
				case 'del':
					if(list.length>1) list.splice(index, 1)
					break;
				case 'up':
					this.swapItems(list, index, index-1)
					break;
				case 'down':
					this.swapItems(list, index, index+1)
					break;
			}
		},
		// 元素的上下移动
		swapItems(arr, index1, index2){
			if(arr.length <= 1) return arr // 长度不够不处理
			if (index1 > index2) {
				if(index1 == 0) return arr // 上移不处理
			} else if(index1 < index2){
				if(index1 == arr.length - 1) return arr // 下移不处理
			}
			arr[index1] = arr.splice(index2,1,arr[index1])[0] // 上下移动
		　　return arr
		},
		// http地址需去掉最后的/,否则回显的时候返回{},属于uniCloud的bug,待官方修复
		formatUrl(val){
			if(val.indexOf('http')==0 && val.substr(val.length-1,1)=='/'){
				return val.substr(0,val.length-1)
			}else{
				return val
			}
		},
		// 添加热区
		addArea(comp, close){
			const w = 40 // 默认宽度
			const offset = Math.floor(Math.random() * w) // 获取1-w之间的随机数
			if(!comp.areas) this.$set(comp, 'areas', [])
			comp.areas.push({_id: Date.now(),w: w,h: w,top: offset,left: offset, close})
		},
		// 获取链接输入框的备注
		getInputUrlLabel(a){
			return `热区${a+1}链接`
		},
		// 提交
		submit(){
			// 参数校验
			if(this.res.name&&!/^\w+$/.test(this.res.name)){
				showToast('页面别名由英文,数字,下划线组成')
				return;
			}
			if(!this.res.title){
				showToast('请输入页面别名')
				return;
			}
			// 删除临时字段
			for (let comp of this.res.comps) {
				if(comp.type == this.designType.layer){
					delete comp['show_layer_admin']
				}
			}
			// 请求接口
			let api = this.isEdit ? apiDesignEdit : apiDesignAdd
			api(this.res).then(()=>{
				showToast('保存成功', ()=>{
					uni.navigateBack()
				})
			})
		},
		// 删除
		del(){
			uni.showModal({
				content: "确定删除当前装修页面吗?",
				success: res=> {
					if(res.confirm){
						apiDesignDel(this.res._id).then(()=>{
							showToast('删除成功', ()=>{
								uni.navigateBack()
							})
						})
					}
				}
			})
		},
		// 返回
		doBack(){
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss">
.page-design-edit {
	display: flex;

	view,
	text,
	image,
	input,
	textarea {
		box-sizing: border-box;
	}
	::-webkit-scrollbar-track {
		background-color: transparent;
	}
	::-webkit-scrollbar {
		width: 6px;
	}
	::-webkit-scrollbar-thumb {
		border-radius: 6px;
		background-color: #ccc;
	}
	::-webkit-scrollbar-thumb:hover {
		background-color: #aaa;
	}

	::v-deep img {
		-webkit-user-drag: none !important;
	}

	.left-warp {
		width: 160px;
		padding-top: 30px;
		.btn-back {
			display: block;
			width: 30px;
			height: 30px;
			line-height: 30px;
			margin: auto;
			font-size: 20px;
			color: $uni-color-primary;
			&:hover {
				border-color: #ff4d4f;
				color: #ff4d4f;
			}
		}
		.comp {
			width: 60px;
			height: 60px;
			line-height: 60px;
			margin: 30px auto;
			text-align: center;
			border-radius: 50%;
			font-size: 14px;
			border: 1px solid $uni-color-primary;
			color: $uni-color-primary;
			cursor: pointer;
			&.active,
			&:hover {
				border-color: #ff4d4f;
				color: #ff4d4f;
			}
		}
		.comp-layers {
			margin-top: -20px;
			.comp-layer {
				padding: 5px 0;
				text-align: center;
				font-size: 12px;
				color: $uni-color-primary;
				&.active,
				&:hover {
					border-color: #ff4d4f;
					color: #ff4d4f;
				}
			}
		}
	}

	.center-warp {
		flex: 1;
		background-color: #fafafa;
		.phone {
			position: relative;
			width: 395px;
			border-radius: 30px;
			padding: 50px 10px 85px;
			border: 1px solid #666;
			margin: 20px auto 0;
			background-color: #fff;
			box-shadow: 0 0 6px rgba(0, 21, 41, 0.35);
			.phone-content {
				position: relative;
				width: 375px;
				overflow-y: auto;
				border: 1px solid #666;
				.phone-status {
					z-index: 99;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 20px;
					pointer-events: none;
				}
			}
			.phone-top {
				position: absolute;
				top: 20px;
				left: 50%;
				width: 100px;
				height: 10px;
				border-radius: 10px;
				transform: translateX(-50%);
				border: 1px solid #666;
			}
			.phone-bottom {
				position: absolute;
				bottom: 18px;
				left: 50%;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				border: 1px solid #666;
				transform: translateX(-50%);
			}
		}
	}
	.right-warp {
		display: flex;
		flex-direction: column;
		width: 500px;
		.tabs-warp {
			width: 300px;
			padding: 15px;
			margin: auto;
		}
		.set-warp {
			flex: 1;
			overflow-y: auto;
			padding: 10px 20px;
			font-size: 14px;
			.comp-empty {
				text-align: center;
				color: #999;
			}
			.item-warp {
				position: relative;
				margin-bottom: 20px;
				display: flex;
				align-items: center;
				.label {
					margin-right: 10px;
				}
				.item-flex {
					flex: 1;
				}
				.input {
					height: 50px;
					padding-left: 10px;
					border: 1px solid #eee;
				}
				.me-radio,
				/deep/.me-radio {
					margin-left: 40px;
				}
			}

			.add-area {
				margin-right: 20px;
				padding: 4px 0;
				color: $uni-color-primary;
			}

			.comp-swiper {
				.sw-item {
					border-bottom: 1px solid #eee;
					margin-bottom: 15px;
					.eidt-swiper {
						text-align: center;
						padding-bottom: 15px;
						.btn-icon {
							display: inline-block;
							width: 20px;
							height: 20px;
							line-height: 20px;
							margin: 0 5px;
							border-radius: 50%;
							font-size: 14px;
							border: 1px solid #999;
							color: #333;
						}
					}
				}
			}
		}
		.submit-warp {
			text-align: center;
			padding: 10px 0 15px;
			.btn {
				display: inline-block;
				width: 100px;
				margin: 0 10px;
			}
		}
	}
}

.min-page {
	.left-warp {
		width: 120px;
		.comp {
			width: 54px;
			height: 54px;
			line-height: 54px;
		}
	}
	.center-warp {
		.phone {
			padding: 10px;
			border-radius: 8px;
			.phone-content {
				width: 375px;
			}
			.phone-top {
				display: none;
			}
			.phone-bottom {
				display: none;
			}
		}
	}
}
</style>
